// 导入 css 文件
@import './reset.less';

// 清除浮动的混合
.clearfix() {
  &::after {
    content: '';
    display: block;
    clear: both;
  }
}

#root {
  height: 2000px;

  // 顶部导航
  #top {
    background-color: #eaeaea;
    height: 30px;
    line-height: 30px;

    // 版心
    .container {
      width: 1200px;
      margin: 0 auto;

      &::after {
        content: '';
        display: block;
        clear: both;
      }

      // 左侧结构
      .left {
        float: left;

        // 欢迎
        .welcome {
          float: left;
          font-weight: bold;
        }

        // 登录与注册按钮
        .login {
          float: left;

          // 登录的链接
          a:first-child {
            padding: 0 5px;
            border-right: solid 1px #b3aeae;
          }
        }
      }

      // 右侧结构
      .right {
        float: right;

        li {
          float: left;

          a {
            padding: 0 10px;
            border-right: solid 1px #b3aeae;
          }

          // 最后一个 li
          &:last-child {
            a {
              border-right: none;
              padding-right: 0;
            }
          }
        }
      }
    }
  }

  // logo 与搜索区域
  #logo-search-section {

    // 版心
    .container {
      width: 1200px;
      margin: 0 auto;

      //清除浮动
      &::after {
        content: '';
        display: block;
        clear: both;
      }

      //左侧 logo
      .logo {
        float: left;
        width: 175px;
        height: 56px;
        margin: 25px 45px;
      }

      //右侧搜索框
      .search {
        padding-top: 35px;
        float: right;

        // input 输入框
        input {
          box-sizing: border-box;
          width: 490px;
          height: 32px;
          padding: 0 4px;
          border: solid 3px #ea4a36;
          float: left;
          color: #03f;

          &::placeholder {
            color: #ea4a36;
          }
        }

        // 搜索按钮
        button {
          width: 68px;
          height: 32px;
          background: #ea4a36;
          color: #fff;
          border: none;
          float: left;
        }
      }

    }
  }

  //主体导航
  #nav {
    border-bottom: solid 2px #e1251b;

    // 版心
    .container {
      width: 1200px;
      margin: 0 auto;

      ul {
        //清除浮动
        .clearfix();

        li {
          float: left;
          margin: 0 22px;
          font-size: 16px;
          color: #333;
          line-height: 50px;

          // 第一个 li 元素   全部商品分类
          &:first-child {
            width: 210px;
            height: 50px;
            background: #e1251b;
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            margin-right: 22px;
            margin-left: 0;

            a {
              color: #fff;
            }
          }
        }
      }
    }
  }

  //主体内容
  #content {

    //版心
    .container {
      width: 1200px;
      margin: 0 auto;
      padding-top: 15px;

      //路径导航
      .breadcrumb {
        padding: 9px 15px 9px 0;
        font-size: 0;

        // 斜线
        span {
          padding: 0 5px;
          font-size: 12px;
        }

        a {
          font-size: 12px;
        }
      }

      //放大镜与商品介绍区域
      .goods-intro-section {
        padding: 5px 0 15px;
        .clearfix();

        // 左侧
        .left {
          width: 400px;
          float: left;

          // 小图区域
          .small-img {
            width: 400px;
            height: 400px;
            box-sizing: border-box;
            border: solid 1px #dfdfdf;
            position: relative;

            >img {
              width: 100%;
            }

            // 遮罩元素
            .mask {
              width: 200px;
              height: 200px;
              position: absolute;
              left: 0;
              top: 0;
              background: rgba(0,0,0, 0.5);
              display: none;
              &:hover{
                cursor: move;
              }
            }

            //大图
            .big-img {
              position: absolute;
              left: 420px;
              overflow: hidden;
              top: 0;
              width: 400px;
              height: 400px;
              border: solid 1px #ddd;
              display: none;
              > img{
                position: absolute;
              }
            }

            &:hover {
              .mask {
                display: block;
              }

              .big-img {
                display: block;
              }
            }
          }

          // 缩略图
          .thumbnails-section {
            width: 400px;
            margin-top: 5px;
            .clearfix();

            // 上一个下一个按钮的公共样式
            .btn {
              width: 10px;
              height: 54px;
              border: solid 1px #ccc;
              background: #ebebeb;
              line-height: 54px;
              float: left;
              cursor: pointer;
              user-select: none;
            }

            // 上一个按钮
            .prev {
              margin-right: 4px;
            }

            // 缩略图容器
            .thumbnails {
              width: 372px;
              height: 56px;
              float: left;
              overflow: hidden;
              position: relative;
              font-size: 0;

              ul {
                .clearfix();
                white-space: nowrap;
                position: absolute;
                transition: left 0.4s;
                left: 0px;

                li {
                  width: 50px;
                  height: 50px;
                  border: solid 1px #ccc;
                  padding: 2px;
                  margin-right: 20px;
                  display: inline-block;

                  img {
                    width: 100%;
                  }
                  //激活状态的类
                  &.active{
                    border: solid 1px #e1251b;
                  }
                }
              }
            }
          }
        }

        //右侧
        .right {
          width: 700px;
          float: right;

          //商品基本信息 (上半部分)
          .basic-info-section {
            // 商品标题
            >h3 {
              font-size: 14px;
              line-height: 21px;
              margin-top: 15px;
            }

            // 优惠内容
            >p {
              color: #e12228;
              margin-top: 15px;
            }

            // 价格与促销区域
            .price-sale-section {
              margin-top: 10px;
              line-height: 28px;
              background: #fee9ec;
              padding: 7px;
              //价格区域
              .price-section {
                .clearfix();
                // 设置价格标题
                .attr {
                  margin-right: 15px;
                  float: left;
                }

                // 价格区域
                .value {
                  float: left;
                  color: #cc1122;
                  // font-size: 0;
                  span:first-child {
                    font-size: 16px;
                    float: left;
                  }

                  span:nth-child(2) {
                    font-size: 24px;
                    font-weight: bold;
                    float: left;
                  }

                  span:last-child {
                    font-size: 12px;
                    float: left;
                  }
                }

                //评价数量
                .eval-total {
                  float: right;
                }
              }
              //促销区域
              .sale-section{
                .clearfix();
                // 标题
                .attr{
                  margin-right: 15px;
                  float: left;
                }
                //右侧
                .value{
                  width: 520px;
                  line-height: 28px;
                  float: left;
                  color: #999;
                  > span{
                    background: #c81623;
                    padding: 3px;
                    color: #fff;
                  }
                }
              }

            }

            .attr{
              float: left;
              margin-right: 15px;
            }
            .value{
              float: left;
              color: #999;
            }

            //支持
            .support{
              margin-top: 10px;
              line-height: 28px;
              .clearfix();
            }

            //配送至
            .address{
              .clearfix();
              margin-top: 10px;
              line-height: 28px;
              padding-bottom: 5px;
              border-bottom: solid 1px #ededed;
            }
          }

          //选中属性标签区域
          .choosed-section{
            padding-top: 10px;
            .clearfix();
            .mark{
              height: 30px;
              background-color: snow;
              border:solid 1px #ddd;
              padding: 0 20px;
              float: left;
              margin-right: 20px;
              line-height: 30px;
              span:last-child{
                color: red;
                margin-left: 20px;
              }
            }
          }

          //商品属性选择区域
          .choose-section{
            margin-top: 10px;
            line-height: 28px;
            //每行
            dl{
              margin: 13px 0;
              .clearfix();
              // 商品属性名称
              dt{
                margin-right: 15px;
                float: left;
              }
              //属性值元素
              dd{
                float: left;
                margin-right: 5px;
                color: #666;
                line-height: 24px;
                padding: 2px 14px;
                border-left: solid 1px #eee;
                border-top: solid 1px #eee;
                border-right: solid 1px #bbb;
                border-bottom: solid 1px #bbb;
                //添加特别的类名
                &.active{
                  color: rgb(221, 19, 19);
                }
              }
             
            }
          }

          //数量与加购
          .num-cart{
            .clearfix();
            // 数量调整区域
            .num-input{
              width: 55px;
              margin-right: 15px;
              float: left;
              position: relative;
              // 输入框元素
              input{
                width: 38px;
                height: 37px;
                border: solid 1px #ddd;
                color: #555;
                text-align: center;
              }
              //公共样式
              > div{
                width: 15px;
                height: 18px;
                background: #f1f1f1;
                color: #666;
                border: solid 1px #ddd;
                position: absolute;
                text-align: center;
                line-height: 18px;
                cursor: pointer;
                user-select: none;
              }

              //加号
              .add{
                right: 0;
                top: 0;
              }
              //减号
              .sub{
                right: 0;
                top: 19px;
              }
            }
            //按钮
            button{
              padding: 0 25px;
              height: 38px;
              font-size: 16px;
              background: #e1251b;
              color: #fff;
              border: none;
            }
          }
        }
      }

      //相关推荐与商品详情
      .related-goods-info{
        margin: 30px auto 0;
        .clearfix();
        // 左侧相关分类结果
        .left{
          width: 210px;
          border: solid 1px #ccc;
          float: left;
          //标签页头部结构
          .tab-headers{
            .clearfix();
            //单个的标签页元素
            .item{
              height: 40px;
              float: left;
              border-top: solid 3px #fff;
              border-bottom: solid 1px #ccc;
              width: 105px;
              line-height: 37px;
              text-align: center;
              box-sizing: border-box;
              font-weight: bold;
              cursor: pointer;
              user-select: none;

              //第一个元素添加有边框
              &:first-child{
                border-right: solid 1px #ccc;
              }
              //设置高亮效果
              &.active{
                border-top-color: #e1251b;
                border-bottom: none;
              }
            }
          }
          // 标签页主体内容
          .tab-content{
            .item{
              padding: 10px;
              display: none;
              &.active{
                display: block;
              }
            }
            // 第一个标签页主体
            .item:first-child{
              //相关分类
              .related-cates{
                .clearfix();
                li{
                  width: 50%;
                  border-bottom: dashed 1px #ededed;
                  line-height: 28px;
                  float: left;
                }
              }
              //相关商品
              .related-goods{
                li{
                  margin: 5px 0 15px;
                  border-bottom: solid 1px #ededed;
                  //图片
                  img{
                    width: 152px;
                  }
                  //价格
                  .price{
                    font-size: 16px;
                    color: #c81623;
                  }
                  .btn{
                    text-align: center;
                    //购物车
                    button{
                      margin: 5px 0;
                      border: solid 1px #8c8c8c;
                      color: #8c8c8c;
                      padding: 2px 14px;
                      line-height: 18px;
                      background: white;
                    }
                  }
                  //去除最后一个元素底边框
                  &:last-child{
                    border-bottom: none;
                  }

                }
              }
            }
          }
        }

        //搭配与商品详情
        .right{
          width: 980px;
          float: right;
          // 搭配
          .dapei-section{
            border: solid 1px #ddd;
            margin-bottom: 15px;
            // 搭配标题
            .header{
              border-bottom:solid 1px #ddd;
              background: #f1f1f1;
              color: #333;
              padding: 5px 0 5px 15px;
              font-weight: bold;
            }
            // 搭配主体
            .dapeis{
              height: 170px;
              padding-top: 10px;
              .clearfix();
              // 当前商品信息
              .self{
                width: 127px;
                height: 165px;
                position: relative;
                float: left;
                img{
                  width: 87px;
                  margin: 0 auto;
                }
                //价格
                > p{
                  color: #c81623;
                  font-size: 16px;
                  text-align: center;
                }
                //加号
                .plus{
                  position: absolute;
                  top: 48px;
                  right: -25px;
                  font-size: 16px;
                }

              }

              //搭配商品
              .dapei-goods{
                width: 668px;
                height: 165px;
                float: left;
                .clearfix();
                //搭配单个商品
                li{
                  width: 127px;
                  float: left;
                  margin: 0 20px;
                  text-align: center;
                  img{
                    width: 120px;
                    height: 130px;
                  }
                }
              }

              // 结算
              .checkout{
                width: 153px;
                height: 165px;
                float: left;
                padding-left: 20px;
                border-left: solid 1px #ddd;
                // 已购数量
                .total{
                  margin: 10px 0;
                }
                //套餐价
                .tcj{
                  margin: 10px 0;
                  font-weight: bold;
                }
                //价格
                .price{
                  color: #b1191a;
                  font-size: 16px;
                  margin-bottom: 10px;
                }
                // 加购按钮
                button{
                  padding: 10px 25px;
                  font-size: 16px;
                  color: #fff;
                  background: #e1251b;
                  border:none;
                }
              }
            }
          }

          //商品详情
          .goods-detail{
            // 标签页头部
            .tab-header{
              background: #ededed;
              .clearfix();
              li{
                border: solid 1px #ddd;
                color: #fff;
                height: 40px;
                padding: 0 11px;
                background: #fff;
                float: left;
                line-height: 40px;
                border-right: none;
                &:last-child{
                  border-right: solid 1px #ddd;
                }
                // active高亮效果
                &.active{
                  background: #e1251b;
                  a{
                    color: #fff;
                  }
                }
              }
            }
            // 标签页主体内容
            .tab-content{
              > li{
                padding-left: 20px;
                > ul{
                  > li{
                    margin: 10px 0;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  #drawer{
    width: 300px;
    height: 100%;
    position: fixed;
    background: #7a6e6e;
    transition: right 0.3s ease-in-out;
    top: 0;
    right: 0;
    
    // 主体区域
    .main{
      position: absolute;
      width: 294px;
      left: 6px;
      height: 100%;
      background: bisque;
      z-index: 2;
    }

    // 左上角按钮图标
    .top-icon{
      width: 35px;
      height: 35px;
      background-color: #7a6e6e;
      border-radius: 3px 0px 0px 3px;
      position: absolute;
      left: -29px;
      background-image: url(../images/cross.png);
      background-size: cover;
    }

    // 列表菜单
    .list-menu{
      position: absolute;
      left: -29px;
      top: 50%;
      transform: translateY(-50%);
      li{
        width: 35px;
        height: 35px;
        background-color: #867576;
        background-image: url(../images/toolbars.png);
        background-position: -87px -174px;
        position: relative;
        p{
          position: absolute;
          width: 62px;
          height: 35px;
          left: 35px;
          transition: left 0.5s;
          background: #867576;
          line-height: 35px;
        }
        //鼠标移入之后效果
        &:hover{
          background-color: #ffc0cb;
          p{
            left: -62px;
            background-color: #ffc0cb;
          }
        }
      }
    }

    //关闭状态的样式
    &.closed{
      right: -294px;
      // 左上角图标
      .top-icon{
        background-image: url(../images/list.png)
      }
    }
  }
}